<template>
	<view>
		<view>
			<uni-list style="width: 100%;">
				<!-- :thumb="item.icon" -->
				<uni-list-item class="uni-list-item__extra-text1" v-for="(item, index) in listArr" ellipsis=1 :rightText="item.title" thumb-size="lg" :key="index" link  clickable @click="$g.go('/pages/category_art/art_detail',{id:item.id,type:'know'})">
					<template slot="header">
						<view class="list_slot">
							<view class="list_icon_p" :style="item.background">
								<image :src="item.icon" mode=""></image>
							</view>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		computed: {
			...mapState(['token', 'userId'])
		},
		data() {
			return {
				listArr: [{
					title: "浏览记录",
					icon: "../../static/images/message1.png",
					background:"background-color: rgb(251,197,93);",
				}, {
					title: "关注记录",
					icon: "../../static/images/message2.png",
					background:"background-color:  rgb(142,184,226);",
				}, {
					title: "红线消息",
					icon: "../../static/images/message3.png",
					background:"background-color: rgb(254,82,126);",
				}, ],
				tabIndex: 0,
				page: 1,
				pages: null,
				titleList: [{
						title: '动态列表',
						num: ''
					},
					{
						title: '约会邀请',
						num: ''
					},
				],
				list: [],
				isVip: null
			};
		},
		//下拉刷新
		onPullDownRefresh() {
			// console.log('下拉刷新');
			// setTimeout(() => {
			// 	uni.stopPullDownRefresh();
			// 	this.getData();
			// }, 1000)
		},
		onLoad() {

		},
		onShow() {

			// if (!this.token) {
			// 	uni.showModal({
			// 		title: '您还未登录',
			// 		content: '点击登录,登录后可查看更多!',
			// 		showCancel: true,
			// 		confirmText: '登录',
			// 		success: (res) => {
			// 			// console.log(res);
			// 			if (res.confirm) {
			// 				uni.navigateTo({
			// 					url: "/pages/index/wxLogin"
			// 				})
			// 			} else if (res.cancel) {
			// 				console.log('用户点击取消');
			// 			}

			// 		}
			// 	});
			// 	return false;
			// }

			//获取数据
			// this.getData();

			//获取消息数量
			// this.getMsg();

		},
		methods: {
			//获取消息数
			async getMsg() {
				// let token = uni.getStorageSync('token');
				// let userId = uni.getStorageSync('userId');
				// console.log(token);
				if (this.token) {
					try {
						let params = {
							token: this.token,
							userId: this.userId
						}
						let res = await this.$request.request.get('/api/user/noRead', params);
						console.log(res.data);
						this.$common.setCartBadge(res.data.count);
					} catch (err) {
						this.$request.error(err, this)
					}
				}

			},
			doRead(e) {
				if (e.fromstatus == 4) {
					this.readDown(e);
				} else {
					this.toDetail(e);
				}
			},
			async readDown(e) {
				try {
					let params = {
						token: this.token,
						msgId: e.id
					};
					let res = await this.$request.request.get('/api/user/changeMsg', params)
					console.log(res);
					if (res.code == 200) {
						this.getData();
					}
				} catch (err) {
					this.$request.error(err, this)
				}
			},
			//获取数据
			//type 0列表  1约会
			async getData() {
				try {
					let params = {
						token: this.token,
						page: this.page,
						type: this.tabIndex
					};
					let res = await this.$request.request.get('/api/user/appointment', params)
					console.log(res);
					if (res.code == 200) {
						//重新获取消息数量,以便达到实时的效果
						this.getMsg();
						this.list = res.data.list;
						this.pages = res.data.count;
						this.isVip = res.data.isVip;
						let total = res.data.total;
						let read = res.data.read;
						if (this.tabIndex == 0) {
							this.titleList[0].num = read;
							this.titleList[1].num = total - read;
						} else {
							this.titleList[0].num = total - read;
							this.titleList[1].num = read;
						}
					}
				} catch (err) {
					this.$request.error(err, this)
				}
			},
			//顶部点击切换
			change(e) {
				this.tabIndex = e;
				this.page = 1;
				this.pages = null;
				this.list = [];
				//获取数据
				this.getData();
			},
			//前往详情
			toDetail(e) {
				// console.log(e);
				if (!this.isVip) {
					uni.showModal({
						title: '温馨提醒',
						content: '您还未开通VIP，仅有VIP才能进行此项操作',
						showCancel: true,
						confirmText: '开通VIP',
						success: (res) => {
							// console.log(res);
							if (res.confirm) {
								this.toPay(0);
							} else if (res.cancel) {
								console.log('用户点击取消');
							}

						}
					});
					return false;
				}
				let fId;
				let status;
				if (e.fromid !== null && e.fromid) {
					fId = e.fromid;
				} else {
					fId = '';
				}

				if (e.fromstatus == 1) {
					status = 1;
				} else if (e.fromstatus == 3 || e.fromstatus == 4) {
					status = 0;
				}

				uni.navigateTo({
					url: 'message_detail?id=' + e.id + '&fromId=' + fId + '&type=' + status
				})

			},
			//列表进入详情
			toDetail1(e) {
				console.log(e);
				if (!this.isVip) {
					uni.showModal({
						title: '温馨提醒',
						content: '您还未开通VIP，仅有VIP才能进行此项操作',
						showCancel: true,
						confirmText: '开通VIP',
						success: (res) => {
							// console.log(res);
							if (res.confirm) {
								this.toPay(0);
							} else if (res.cancel) {
								console.log('用户点击取消');
							}

						}
					});
					return false;
				}
				//先判断是否是系统消息
				if (e.fromuserid == 0) {
					//默认系统消息不进如详情,执行消点请求
					this.cancelDian(e.id);
				} else {
					let fId;
					if (e.fromid !== null && e.fromid) {
						fId = e.fromid;
					} else {
						fId = '';
					}

					uni.navigateTo({
						url: 'message_subDetail?id=' + e.id + '&fromId=' + fId + '&type=' + e.status
					})
				}
			},
			//消点
			async cancelDian(e) {
				try {
					let params = {
						token: this.token,
						msgId: e
					};
					let res = await this.$request.request.post('/api/user/changeMsg', params)
					console.log(res);
					if (res.code == 200) {
						//重新获取数据
						this.getData();
					}
				} catch (err) {
					this.$request.error(err, this)
				}
			},
			//前往开通会员
			async toPay() {
				try {
					let params = {
						token: this.token
					};
					let res = await this.$request.request.post('/api/user/renewal', params)
					console.log(res);
					if (res.code == 200) {
						//跳转支付页
						uni.navigateTo({
							url: '/pages/my/payInfo?orderNo=' + res.data.orderNo + '&price=' + res.data.price
						})
					}
				} catch (err) {
					this.$request.error(err, this)
				}
			},
			//转换时间戳
			doreset(e) {
				//转换时间戳
				if ((e + '').length != 13) {
					var date = new Date(e * 1000); //如果date为13位不需要乘1000
					var Y = date.getFullYear() + '-';
					var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
					var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
				} else {
					var date = new Date(e); //如果date为13位不需要乘1000
					var Y = date.getFullYear() + '-';
					var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
					var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
				}
				return Y + M + D;
			}
		}
	}
</script>

<style lang="scss">
	@import 'message.scss'
</style>
